<template>
    <div>
        <div id="container"></div>
        <el-divider content-position="left">电影院列表</el-divider>

        <el-table :data="tableData" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }">
            <el-table-column prop="cinema_name" label="影院名称" sortable width="220">
            </el-table-column>

            <el-table-column prop="address" label="影院地址" :formatter="formatter">
            </el-table-column>
            <el-table-column prop="city" label="影院位置" sortable width="120">
                <template slot-scope="scope">
                    {{ scope.row.city }} {{ scope.row.district }}
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="240">
                <template slot-scope="scope">
                    <el-row>
                        <el-button type="success" icon="el-icon-map-location" circle
                            @click="cinemaPostion(scope.row.id)"></el-button>
                        <el-button type="success" icon="el-icon-monitor" circle
                            @click="$router.push(`/home/cinema-room-list/${scope.row.id}`)"></el-button>
                        <el-button type="warning" icon="el-icon-edit" circle
                            @click="$router.push(`/home/cinema-update/${scope.row.id}`)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle @click="delCinema(scope.row.id)">
                        </el-button>
                    </el-row>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
    data() {
        return {
            tableData: [],
            map: null,
            marker: null,
        }
    },
    methods: {
        formatter(row, column) {
            return row.address;
        },
        cinemaPostion(id) {
            // 查看电影院位置
            this.$http.cinemaApi.queryById({ id }).then(res => {
                let lng = res.data.data.longitude;
                let lat = res.data.data.latitude;
                this.marker = new AMap.Marker({
                    position: [lng, lat], // 基点位置
                });
                this.map.setCenter([lng, lat])
                this.map.add(this.marker)
            });
        },
        delCinema(id) {
            this.$confirm('此操作将永久删除此项, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.cinemaApi.delete({ id }).then(res => {
                    if (res.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.$http.cinemaApi.list().then(res => {
                            this.tableData = res.data.data
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        loadMap() {
            AMapLoader.load({
                "key": "aac7008d35e933c02d226a990f5bd236",   // 申请好的Web端开发者Key，首次调用 load 时必填
                "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                "plugins": ['AMap.Geocoder'],      // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap) => {
                this.map = new AMap.Map('container', {
                    center: [114.379845, 30.50663],//初始化地图中心点位置
                    zoom: 18,//初始化地图级别
                });
            }).catch(e => {
                console.log(e);
            });
        }
    },
    mounted() {
        this.$http.cinemaApi.list().then(res => {
            this.tableData = res.data.data
        });
        // this.loadMap()

    },
}
</script>

<style lang="scss" scoped>
#container {
    width: 100%;
    height: 300px;
    border: 2px solid gray;
}
</style>